﻿<div style="width:600px;margin:0 auto;padding-top:20px;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
        	<label class="layui-form-label">项目名称</label>
            <div class="layui-input-block">
                <select id="name" name="name" win-verify="required" lay-filter="name"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">灰度标示</label>
            <div class="layui-input-block">
                <select id="flag" name="flag" win-verify="required" lay-filter="flag"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-block winui-radio">
                <input type="radio" name="type" value="ip" title="IP" checked/>
                <input type="radio" name="type" value="keyInRequest" title="KeyInRequest" />
                <input type="radio" name="type" value="keyInSession" title="KeyInSession" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">参数关键字</label>
            <div class="layui-input-block">
                <input type="text" name="key" placeholder="请输入一个参数关键字" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">参数值</label>
            <div class="layui-input-block">
                <input type="text" name="value" placeholder="请输入参数值，多个用英文逗号分开" autocomplete="off" class="layui-input" />
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <textarea name="remark" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="winui-btn" lay-submit lay-filter="formAddMenu">确定</button>
                <button class="winui-btn" onclick="winui.window.close('addMenu'); return false;">取消</button>
            </div>
        </div>
    </form>
</div>
<script>
    layui.use(['form','layer'], function (form) {
        var $ = layui.$, msg = winui.window.msg;
        var selectData = {};
		//加载数据
		$.ajax({
			url : '/canary/instances',
			type : "get",
			dataType : "json",
			contentType : "application/json",
			async : false,
			success : function(json) {
				if (json.success) {
					selectData = json.data;
					console.log(selectData);//没啥用
					var strs = "";
					for ( var x in selectData) {
						strs += '<option value = "' + selectData[x].appName + '">'
								+ selectData[x].appName + '</option>'
					}
					$("#name").html(strs);
				} else {
					msg(json.message)
				}
			}
		});

		form.render();
		
		//添加select的监听事件
	    form.on('select(name)', function(data) { //no是那个lay-filter的值
			var nos = $("#name").val();//获得选中的option的值
			console.log(nos);//没啥用
			var strs = "";
			for ( var x in selectData) {
				if(nos == selectData[x].appName){
					strs += '<option value = "' + selectData[x].canaryFlag + '">'
					+ selectData[x].canaryFlag + '</option>'
				}
			}
			$("#flag").html(strs);
			form.render('select');//最后记得渲染
		});

		form.on('submit(formAddMenu)', function(data) {
			//表单验证
			if (winui.verifyForm(data.elem)) {
				layui.$.ajax({
					type : 'post',
					url : '/canary/add',
					contentType : 'application/json;charset=utf-8',
					data : JSON.stringify(data.field),
					dataType : 'json',
					success : function(json) {
						if (json.success) {
							msg('添加成功');
						} else {
							msg(json.message)
						}
						winui.window.close('addMenu');
					},
					error : function(xml) {
						msg('添加失败');
						console.log(xml.responseText);
					}
				});
			}
			return false;
		});
	});
</script>